<template>
  <el-dialog :close-on-click-modal="false" append-to-body width="70%" title="详情" :visible="show" :before-close="close">
    <div class="content">
      <div class="left">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="工单号">{{ detail.variables?.id }}</el-descriptions-item>
          <el-descriptions-item label="案卷类型">{{ detail.variables?.sourceName || formatSoureType(detail.variables?.sourceType) }}</el-descriptions-item>
          <el-descriptions-item label="事件类型">{{ detail.variables?.categoryName }}</el-descriptions-item>
          <el-descriptions-item v-if="detail.variables?.type" label="问题类型">{{ detail.variables?.typeName||'--' }}</el-descriptions-item>
          <el-descriptions-item v-if="detail.variables?.subType" label="详细类型">{{ detail.variables?.subTypeName||'--' }}</el-descriptions-item>
          <el-descriptions-item label="事件描述">{{ detail.variables?.content }}</el-descriptions-item>
          <el-descriptions-item label="详细地址">{{ detail.variables?.address }}</el-descriptions-item>
          <el-descriptions-item label="坐标">
            <MapMarker ref="MapMarker" :location="detail.variables?.location"></MapMarker>
          </el-descriptions-item>
          <el-descriptions-item label="照片">
            <ImagePreviews :src="detail.variables?.pics"></ImagePreviews>
          </el-descriptions-item>
          <el-descriptions-item label="要求完成时间">{{ detail.variables?.gmtTimeLimit }}</el-descriptions-item>
          <el-descriptions-item label="上报时间">{{ detail.gmtCreate }}</el-descriptions-item>
          <!-- <el-descriptions-item label="处理部门">{{ detail.deptName }}</el-descriptions-item>
          <el-descriptions-item label="处置时间">{{ detail.gmtHandle }}</el-descriptions-item>
          <el-descriptions-item label="处置人">{{ detail.handlerName }}</el-descriptions-item>
          <el-descriptions-item label="处置人部门">{{ detail.handlerDeptName }}</el-descriptions-item> -->
          <el-descriptions-item label="审核状态">{{ detail.variables?.audit==-1?'未审核':detail.variables?.audit==1?'通过':'未通过' }}</el-descriptions-item>
          <el-descriptions-item label="是否超期" v-if="detail.variables?.expired">{{ detail.variables?.expired == 1?'超期':'未超期' }}</el-descriptions-item>
        </el-descriptions>
        <template v-if="formDetail">
          <el-divider content-position="left">{{formDetail.name}}</el-divider>
          <HandleFormDeal v-if="task.code == 'handle'" @submit="onSubmit"></HandleFormDeal>
          <HandleFormDispatch v-if="task.code == 'dispatch'" @submit="onSubmit"></HandleFormDispatch>
          <HandleFormAudit v-if="task.code == 'audit'" @submit="onSubmit"></HandleFormAudit>
        </template>
      </div>
      <div class="right">
        <el-timeline :reverse="true">
             <!-- start node  -->
          <el-timeline-item v-if="detail.endNodeName">
            <div class="row">
              <div class="key">{{ detail.endNodeName || '--' }}【{{ detail.gmtFinished|| '--' }}】</div>
            </div>
          </el-timeline-item>
          <el-timeline-item v-for="(dot, index) in history" :key="index">
            <div class="row">
              <div class="key">{{ dot.name || '--' }}【{{ dot.endTime||dot.gmtFinished || '--' }}】</div>
            </div>
            <div class="row" v-if="dot.handlerName">
              <div class="key">上报人：</div>
              <div class="value">{{ dot.handlerName || '--' }}</div>
            </div>
            <div class="row" v-if="dot.executorName">
              <div class="key">操作人：</div>
              <div class="value">{{ dot.executorName || '--' }}</div>
            </div>
            <div class="row" v-if="dot.deptName">
              <div class="key">操作人部门：</div>
              <div class="value">{{ dot.deptName || '--' }}</div>
            </div>
            <div class="row" v-if="dot.status!=null">
              <div class="key">状态：</div>
              <div class="value">{{ getTaskState(dot.status) }}</div>
            </div>
            <div class="row" v-if="dot.variables && dot.variables.remark">
              <div class="key">备注：</div>
              <div class="value">{{ dot.variables.remark || '--' }}</div>
            </div>
            <div class="row" v-if="dot.variables && dot.variables.handlePics">
              <el-image v-for="(item,index) in getImgUrl(dot.variables.handlePics)" :key="index" style="width: 60px; height: 60px;border-radius:8px;margin-right:8px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);" :src="item" :preview-src-list="getImgUrl(dot.variables.handlePics)"></el-image>
            </div>
          </el-timeline-item>

            <!-- start node  -->
          <el-timeline-item>
            <div class="row">
              <div class="key">{{ detail.startNodeName || '--' }}【{{ detail.gmtCreate|| '--' }}】</div>
            </div>
            <div class="row">
              <div class="key">{{ detail.creatorName || '--' }}</div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import MapMarker from "@/components/MapMarker";
import ImagePreviews from "@/components/ImagePreviews";

import { taskDtl, execute } from "@/api/flow";
import HandleFormAudit from "./handleFormAudit.vue";
import HandleFormDeal from "./handleFormDeal.vue";
import HandleFormDispatch from "./handleFormDispatch.vue";
export default {
  components: {
    MapMarker,
    ImagePreviews,
    HandleFormAudit,
    HandleFormDeal,
    HandleFormDispatch,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String, null],
      default: null,
    },
  },
  watch: {
    id: {
      handler(nv) {
        nv && this.getDetail();
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {},
      detail: {},
      history: [],
      formDetail: {},
      task: {},
    };
  },
  methods: {
    getDetail() {
      if (!this.id) return;
      taskDtl({ id: this.id }).then((res) => {
        if (res.data) {
          this.task = res.data.task;
          this.detail = res.data.instance;
          this.history = res.data.history || [];
          this.formDetail = res.data.form;
          if (this.detail.variables && this.detail.variables.location) {
            this.$nextTick(() => {
              this.$refs["MapMarker"].addMarker(this.detail.variables.location);
            });
          }
        }
      });
    },
    onChangeGroup(data) {
      this.$set(this.form, "handlerDeptName", data.name);
      console.log(this.form);
    },
    async onSubmit(data) {
      try {
        this.form.ARG_TASK_ID = this.id;
        this.form.ARG_USER_SYSTEM = 1;
        this.form.gmtHandle = this.parseTime(new Date());
        const params = { ...this.form, ...data };

        const res = await execute(params);
        if (res.code == 1) {
          this.$message.success("操作成功！");
          this.close();
          this.$emit("confirm");
        }
      } catch (error) {
        console.log("表单：", error);
      }
    },
    close() {
      this.$emit("update:show", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  padding: 0 20px;
  .left {
    flex: 2;
    border-right: 1px solid #e5e5e5;
    padding-right: 30px;
  }
  .right {
    flex: 1.5;
    padding-left: 20px;
    .row {
      display: flex;
    }
  }
}

.el-descriptions .is-bordered .el-descriptions-item__cell {
  word-break: break-all;
}

::v-deep {
  .el-descriptions-item__label.is-bordered-label {
    width: 100px;
  }
}
</style>